<template>
  <el-header height="60px">
    <img src="../../assets/images/logos.png" class="header-logo">
    <div class="header-user-dropdown row-flex row-flex-middle row-flex-end">
      <el-dropdown class="pointer" @command="personalCenter">
        <span class="el-dropdown-link">
          {{admin.username}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <!-- <el-button type="text" @click="imChat()">即时聊天</el-button> -->
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="info">个人中心</el-dropdown-item>
          <el-dropdown-item command="logout">退出登陆</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span class="header-avater">
        <img
          :src="admin.avatarImg ? admin.avatarImg : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg'"
        >
      </span>
    </div>
    <div class="header-user-dropdown row-flex row-flex-middle row-flex-end">
      <div class="order-message pointer">
        <el-popover placement="bottom-start" width="180" trigger="hover">
          <div class="order-message-content">
            <el-row class="text-center" v-if="total == 0">暂无信息!</el-row>
            <el-row v-for="(value, route) in messages" :key="route">
              <el-button type="text" @click="navTo(route)">您有 {{value.count}} 条新的{{value.type}}消息！</el-button>
            </el-row>
          </div>
          <el-badge slot="reference">
            <span v-if="total" class="num">{{total}}</span>
            <img src="../../assets/images/bell.png" style="width:18px">
          </el-badge>
        </el-popover>
      </div>
    </div>
  </el-header>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      admin: {},
      messages: [],
      total: 0,
      nim : this.$store.state.nim
    }
  },
  mounted() {
    var message = this.getMessage(this.$store.state.doctorInfo.id);
    this.admin = this.$store.state.doctorInfo;
    message;
    setInterval(this.getIMOnMsg, 5000);     
  },
  methods: {
    personalCenter(command) {
      switch(command){
        case 'info':
          this.personalInfo();
          break;
        case 'logout':
          this.logout();
          break;
        default:
          break;
      }
    },
    personalInfo() {
      this.$router.push({'name': 'PersonalInfo'});
    },
    navTo(route){
      this.destroyMessage(route);
      this.$router.replace({name: route});
    },
    imChat(){
      let unreadMsgs = sessionStorage.getItem("unreadMsg");      
      this.total = "";
      if(unreadMsgs){
        let chatTarget = "p2p-"+JSON.parse(String(unreadMsgs)).from_account;        
        this.$store.dispatch('setUnreadMsg',"");      
        this.$router.push({'name':'Chat',params: {sessionId: chatTarget}})
      }
      
    },
    logout() {
      this.axios.get('/doctor/refresh/token').then((response) => {
        this.axios.post('/auth/doctor/logout').then((response) => {
          if(response.data.code == 200){
            this.$message({
              message: response.data.msg,
              type: 'success'
            });
          }else{
            this.$message({
              message: '登陆超时，请重新登陆!',
              type: 'error'
            });
          }
          this.$store.dispatch('logout');
          this.$router.replace({name: 'Login'});
          this.$store.state.nim.disconnect();
        });
      });
    },

    getMessage(id) {
      this.axios.post('/messages/getMessage/doctor/'+ id).then((response) => {
          if(response.data.code == 200){
            this.setMessageVal(response.data.data);
            return;
          }else{
            this.$message({
              message: response.data.msg,
              type: 'error'
            });
            return;
          }
      });
    },

    destroyMessage(route) {
      this.axios.post('/messages/destroyMessage/doctor/' + route).then((response) => {
          if(response.data.code == 200){
            this.setMessageVal(response.data.data);
            return;
          }else{
            this.$message({
              message: response.data.msg,
              type: 'error'
            });
            return;
          }
      });
    },

    setMessageVal(sourceMessage) {
      // this.messages = sourceMessage;
      // var total = 0;
      // Object.keys(sourceMessage).forEach(function(key){
      //   total += sourceMessage[key]['count'];
      // });
      // this.total = total;      
    },

    getIMOnMsg(){
      let onMsg = sessionStorage.getItem("unreadMsg")
      if(onMsg){
            // let text = JSON.parse(onMsg).text;  
            this.total = "您有新的消息";   
      }
      else{
        this.total = "";
      }
    }
}
}
</script>
